<template>
  <div class="details">
    <div class="header">
      <van-nav-bar title="详情页">
        <template #left>
          <van-icon name="arrow-left" size="30" color="black" @click="jump1" />
        </template>

        <template #right>
          <van-popover
            v-model="showPopover"
            theme="dark"
            trigger="click"
            :actions="actions"
            placement="bottom-end"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="ellipsis" size="30" color="black" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
    </div>

    <div class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item
          v-for="(item, index) in bannersList"
          :key="index"
          class="swipe"
        >
          <img :src="item" />
          <div class="page">{{ index + 1 }}/{{ num2 }}</div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="center">
      <p class="price">￥{{ price }}</p>
      <h4>{{ title }}</h4>
    </div>

    <div class="foot">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartNum" @click="goCart"/>
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="加入购物车" @click="addCart"/>
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect1"
    />
  </div>
</template>


<script>

import Vue from "vue";
import {
  Swipe,
  SwipeItem,
  NavBar,
  Popover,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  ShareSheet,
  Toast
} from "vant";
import {getPro,addCart} from '../api/detail'
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(NavBar);
Vue.use(Popover);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(ShareSheet);
Vue.use(Toast);

export default {
  data() {
    return {
      bannersList: [],
      showPopover: false,
      price: "",
      title: "",
      cartNum:'0',
      num1: 0,
      num2: 1,
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分享", icon: "share-o" },
        { text: "我的", icon: "user-o" },
        { text: "搜索", icon: "search" },
      ],
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    jump1() {
      this.$router.push("/home");
    },
    onSelect1(option) {
      console.log(option.name);
      this.showShare = false;
    },
    onSelect(action, index) {
      switch (index) {
        case 0:
          this.$router.push("/home");
          break;
        case 1:
          this.showShare = true;
          break;
        case 2:
          this.$router.push("/me");
          break;
        default:
          break;
      }
    },
    goCart(){
       this.$router.push('/cart')
    },
    addCart(){
      if(!localStorage.getItem('token')){
         Toast('请先进行登录哦~');
        this.$router.push('/login')
       
      }else{
      addCart({userid:localStorage.getItem('id'),proid:this.$route.params.proid,num:1}).then((res)=>{
          console.log(res.data.code);
          if (res.data.code==200) {
            Toast('宝贝已加入购物车');
            this.cartNum++
          }
        })
      }
    }
  },
  created() {
    getPro(this.$route.params.proid).then((res) => {
    //   console.log(res.data.data.banners[0].split(","));
      //   console.log(res.data.data);
      this.bannersList = res.data.data.banners[0].split(",");
      this.price = res.data.data.originprice;
      this.title = res.data.data.proname;
      this.num2 = res.data.data.banners[0].split(",").length;
    });
  },
};
</script>

<style scoped>
.swipe {
  height: 3rem;
}
.swipe img {
  width: 100%;
  height: 3rem;
}
.price {
  color: #ee0a24;
  line-height: 0.4rem;
  font-size: 20px;
  font-weight: 700;
}
.banner {
  position: relative;
}
.page {
  width: 0.4rem;
  height: 0.2rem;
  background-color: rgba(67, 54, 54, 0.5);
  position: absolute;
  bottom: 0.05rem;
  right: 0.01rem;
  border-radius: 0.2rem;
  color: antiquewhite;
  text-align: center;
  line-height: 0.2rem;
}
</style>